/* 字体大小 */
$fontSizes: 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 50, 60, 64, 70, 80;
/* 字体颜色 */
$fontColors: 000, 111, 222, 333, 444, 555, 666, 777, 888, 999, fff, ccc, ddd, ff000;
/* 基本间距 s xm m xl l */
$spaces: 0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 50, 60, 64, 70, 80;
/* 公共背景颜色 */
$backgroundColors: 000, 111, 222, 333, 444, 555, 666, 777, 888, 999, fff, ccc, ddd, ff000;

/* 公共的间隔 */
@each $space in $spaces {
    .ui-m-$(space) {
      margin: $(space)px;
    }
  
    .ui-mt-$(space) {
      margin-top: $(space)px;
    }
  
    .ui-mr-$(space) {
      margin-right: $(space)px;
    }
  
    .ui-mb-$(space) {
      margin-bottom: $(space)px;
    }
  
    .ui-ml-$(space) {
      margin-left: $(space)px;
    }
  
    .ui-p-$(space) {
      padding: $(space)px;
    }
  
    .ui-pt-$(space) {
      padding-top: $(space)px;
    }
  
    .ui-pr-$(space) {
      padding-right: $(space)px;
    }
  
    .ui-pb-$(space) {
      padding-bottom: $(space)px;
    }
  
    .ui-pl-$(space) {
      padding-left: $(space)px;
    }
}

/* 生成字体颜色 */
@each $color in $fontColors {
  .color-$(color) {
    color: #$(color);
  }
}

/* 生成背景颜色 */
@each $bgColor in $backgroundColors {
  .bg-$(bgColor) {
    background-color: #$(bgColor);
  }
}

/* 生成字体大小 */
@each $fontSize in $fontSizes {
  .f$(fontSize) {
    font-size: $(fontSize)px;
  }
}